﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <style>
        /* 自定义分页栏样式 */
        .layui-laypage {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        .navbar {
            display: none;
        }

        .layui-laypage a,
        .layui-laypage span {
            margin: 0 5px;
            padding: 0 10px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #e2e2e2;
            border-radius: 3px;
            cursor: pointer;
        }

            .layui-laypage a:hover {
                color: #009688;
            }

        .layui-laypage .layui-laypage-curr {
            background-color: #009688;
            color: #fff;
        }

        .navbar {
            display: none;
        }
    </style>
</head>

<body>
    <div style="padding: 16px;">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
        </div>
    </script>

    <script type="text/html" id="toolDemo">
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
    <div id="pagination-container"></div>
    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
    <script>
        layui.use(['table', 'layer', 'jquery','laypage'], function () {
            var table = layui.table,
                layer = layui.layer,
                laypage = layui.laypage,
                $ = layui.jquery;

                var totalCount=0;
                // 初始化表格
                table.render({
                    elem: '#test',
                    id: 'Menutable',
                    height: '680',
                           cols: [[
            { type: 'checkbox', fixed: 'left' },
            { field: 'menuId', fixed: 'left', width: 80, title: 'ID', sort: true, totalRow: '合计：' },
            { field: 'menuName', title: '菜单名称' },
            { field: 'menuUrl', title: '地址' },
            { field: 'parentName', title: '父级菜单' },
            { field: 'createName', title: '创建人' },
            { field: 'createTime', title: '创建时间' },
            { field: 'updateName', title: '修改人' },
            { field: 'updateTime', title: '修改时间' },
            { fixed: 'right', title: '操作', width: 120, templet: '#toolDemo' }
        ]],
                    page: true, // 开启分页
                    limit: 15, // 默认每页显示15条
                    limits: [2, 15, 30, 50] // 可选每页显示条数
                });

            function loadMenuData(PageIndex, PageSize) {
                    layer.load(2);
                    var Title = $('[name="Title"]').val();
                    var params = {
                        PageIndex: PageIndex || 1, // 默认第一页
                        PageSize: PageSize || 15,   // 默认每页15条
                        Title: Title
                    }
                    $.ajax({
                        url:  `@ViewBag.BaseUrl/T5/Menu/GetMenu`,                       
                        data: params,
                        type: 'get',
                        dataType: 'json',
                        success: function (res) {
                            console.log(res.totalCount);
                            layer.closeAll('loading');
                            if (res.code === 0) {
                                totalCount=res.totalCount;
                                table.reload('Menutable', {

                                    data: res.data,
                                    count: res.totalCount,
                                    limit: PageSize || 15,
                                    curr: PageIndex || 1,
                                });

                                //分页
                                laypage.render({
                                    count: res.totalCount, // 数据总数
                                    curr: PageIndex,
                                    limit: PageSize,
                                    limits: [2, 15, 30, 50],
                                    layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                                    jump: function (obj, first) {
                                        if (!first) {
                                            loadMenuData(obj.curr, obj.limit);
                                        }
                                    }
                                });

                            } else {
                                layer.msg('获取数据失败: ' + (res.message || '未知错误'), { icon: 2 });
                            }
                        },
                        error: function (xhr, status, error) {
                            layer.closeAll('loading');
                            layer.msg('请求失败: ' + error, { icon: 2 });
                            console.error('Ajax请求失败:', xhr.responseText);
                        }
                    });
                }
                // 页面加载完成后获取数据
                loadMenuData(1, totalCount);

            // 工具栏事件
            table.on('toolbar(test)', function (obj) {
                if (obj.event === 'getCheckData') {
                    var checkStatus = table.checkStatus(obj.config.id);
                    layer.alert(JSON.stringify(checkStatus.data, null, 2));
                }
            });

            // 行工具事件（优化后的删除逻辑）
            table.on('tool(test)', function (obj) {
                const { event, data } = obj;
                if (event === 'del') {
                    // 检查是否有子级菜单
                    if (data.children && data.children.length > 0) {
                        layer.msg('有父级菜单不可以删除', { icon: 5 });
                        return;
                    }
                    handleDelete(data.menuId); // 调用统一删除方法
                }
            });

            // 统一删除处理方法
            function handleDelete(menuId) {
                layer.confirm(`确定删除 ID 为 ${menuId} 的菜单吗？`, { icon: 3 }, function (index) {
                    $.ajax({
                        url: `@ViewBag.BaseUrl/T6/Menu/DelsMenu?MenuId=${menuId}`,                        
                        type: 'POST',
                        contentType: 'application/json',
                        success: function (res) {
                            if (res.code === 100) { // 假设200为成功状态码
                                layer.msg('删除成功', { icon: 1 });
                                table.reload('test'); // 重新加载表格
                            } else {
                                layer.msg(`删除失败：${res.msg || '未知错误'}`, { icon: 5 });
                            }
                        },
                        error: function (xhr) {
                            layer.msg(`请求出错：${xhr.statusText || '网络连接失败'}`, { icon: 5 });
                        },
                        complete: function () {
                            layer.close(index); // 关闭确认框
                        }
                    });
                });
            }

            // 优化后的分页处理（移除冗余的reload调用，Layui自动处理分页）
            table.on('page(test)', function (obj) {
                console.log('当前页：', obj.curr, '每页数量：', obj.limit);
            });

            // 移除冗余的dropdown和行模式代码（根据需求保留核心功能）
        });
    </script>
</body>

</html>    